<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
	        content="width=device-width, initial-scale=1.0" />
	<meta name="HandheldFriendly" content="true" />
	<title>Sample</title>
	<style type="text/css" media="handheld, only screen and (min-width:320px) and (max-width:800px)">
	body {
		background: #FFFFFF;
		margin: 0;
		padding: 0;
		text-align: center;
		font-family: 微软雅黑, 'Microsoft YaHei', \5FAE\8F6F\96C5\9ED1, sans-serif;
		color: #000000;
	}
	#warp {
		width: 100%;     /* 这个一定要设置，某些浏览器不能配合实现居中 */
		margin: 0 auto; /* 自动边距（与宽度一起）会将页面居中 */
		border: 0;
	}
	#header {
		height: 76px;
		border-bottom: #FFC800 solid 4px;
		background: #FAFAF2;
	}
	#logo_wrapper{
		height: 50px;
	}
	ul, li { /* reset  ul, li */
		list-style:none;
		display: block;
		margin:0;
		padding:0;
		border:0;
		outline:0;
		font-size:100%;
		vertical-align:baseline;
		background:transparent;
	}
	.mainItem {
		float: left;
		width: 30%;       /*  注意这里使用百分比，应该和margin配合使用  */
		margin: 0 1%;
		font-size: 13px;
		letter-spacing: 0.05em;
		line-height: 2em;	
		text-align: center;
		text-transform: uppercase;	
		background: #2D5988;	
	}
	li#mainItem1 {
		margin-left: 3%;  /*  第一个tab的左边距重新设置  */
	}
	li#mainItem3 {
		margin-right: 3%; /*  第三个tab的右边距重新设置  */
	}
	a {
		display: block;
		color: #FFFFFF;
		text-decoration: none;
	}
	a:hover {
		color: #DF3030;
	}
	</style>
</head>
<body>
<div id="warp">
  <div id="header">
    <div id="logo_wrapper">
      <img src="images/yourlogo.png" alt="logo"
            width="50" height="50" />
    </div>
    <ul id="nav">
      <li id="mainItem1" class="mainItem">
         <a href="#">HTML5</a>
      </li>
      <li id="mainItem2" class="mainItem">
         <a href="#">CSS3</a>
      </li>
      <li id="mainItem3" class="mainItem">
         <a href="#">ECMAScript5</a>
      </li>
    </ul>
  </div>
</div>
</body>
</html>
